<%--
  Created by IntelliJ IDEA.
  User: gaoran
  Date: 2020/7/16
  Time: 11:05
  To change this template use File | Settings | File Templates.
--%>

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<!DOCTYPE html>
<html style="width: 100%;overflow-x: auto;position:relative ">
<head>
    <title>评测方案管理-评测人员</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="/css/officialDocument/officialDocument.css">

    <link rel="stylesheet" href="/lib/layer/skin/default/layer.css">
    <link type="text/css" rel="stylesheet" href="/lib/pagination/style/pagination.css">
    <link rel="stylesheet" href="/css/base/base.css?20201106.1">

    <script src="/js/common/language.js"></script>

    <script type="text/javascript" src="/js/jquery/jquery-1.9.1.js"></script>
    <script src="/js/jquery/jquery.cookie.js"></script>
    <script type="text/javascript" src="/js/base/tablePage.js"></script>
    <script src="/lib/layer/layer.js?20201106"></script>
    <script src="/js/base/base.js"></script>
    <script src="/lib/laydate/laydate.js"></script>
    <script type="text/javascript" charset="utf-8" src="/lib/pagination/js/jquery.pagination.min.js"></script>
    
    <script type="text/javascript" src="/lib/sheetjs/dist/xlsx.core.min.js"></script>

    <%--<script src="/js/document/makeADraft.js"></script>--%>
    <link rel="stylesheet" type="text/css" href="/css/commonTheme/${sessionScope.InterfaceModel}/commonTheme.css"/>
    <style>

        table tr {
            border-width: 1px;
            border-style: solid;
            border-color: rgb(204, 204, 204);
            border-image: initial;
        }
        table tr th {
            font-size: 13pt;
            color: rgb(47, 92, 143);
            text-align: center;
            padding: 6px;
        }

        table  td {
            font-size: 11pt;
            padding: 6px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            word-break: keep-all;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        table tr:nth-child(2n) {
            background-color: rgb(255, 255, 255);
        }
        table tr:nth-child(2n+1) {
            background-color:#F6F7F9 ;
        }
        .newLeave {
            border-radius: 3px;
            margin-right: 3%;
            float: right;
            width: 70px;
            height: 28px;
            color: #fff;
            font-size: 14px;
            line-height: 28px;
            margin-right: 3%;
            margin-top: 14px;
            cursor: pointer;
            background: #2b7fe0
        }
        .clearfix {
            margin: 5px auto;
            width: 93%;
        }
        textarea.BigStatic {
            font-size: 10pt;
            padding: 1px 5px;
            border: 1px solid #C0BBB4;
            background: #E0E0E0;
            height: 26px;
            border-radius:5px;
            width: 125px;
            /*margin-left: 32px;*/
        }
        .index-desc{
            height: 95px;
            float: left;
            line-height: 95px;
            margin-right: 9px;
        }
        .lab-set{
            height: 50px;
            float: left;
            line-height: 47px;

        }
        #portalName{
            height: 30px;
            margin-right: 16px;
        }
        .li-set p{
            margin: 5px 0 0 103px;
        }
        .M-box3 .active {
            margin: 0px 3px;
            width: 38px;
            height: 38px;
            line-height: 38px;
            background: #2b7fe0;
            font-size: 12px;
            border: 1px solid #2b7fe0;
            color: #fff;
            text-align: center;
            display: inline-block;
        }
        .M-box3 {
            margin-top: 30px;
            position: fixed;
            bottom: 10px;
            right: 76px;
            text-align: center;
        }
        .M-box3 a {
            margin: 0 3px;
            width: 38px;
            height: 38px;
            line-height: 38px;
            font-size: 12px;
            display: inline-block;
            text-align: center;
            background: #fff;
            border: 1px solid #ebebeb;
            color: #333;
            text-decoration: none;
        }
        .jump-ipt {
            width: 38px;
            height: 38px;
            line-height: 38px;
            text-align: center;
            padding: 0;
        }
        .main{
            margin-top: 40px;
            margin-left: 44px;
            height:60px;
        }
        .main ul{
            height:40px;
            margin-top: 5px;
        }
        .main li{
            margin-right: 4%;
            float: left;
        }
        .main .leftspan{
            vertical-align: middle;
        }
        .main a{
            margin: 2px;
            color: #007cfd;
            position: relative;
            top:-12px;
        }
        #kaoheBiaoji{
            margin-left: 12px;
        }
        select {
            margin-left: 12px;
            width: 139px;
            height: 30px;
            border: 1px solid #ccc;
            border-radius: 4px;
            padding-left: 6px;
        }
        input {
            height: 30px;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding-left: 6px;
        }
        #u518_input {
            width: 70px;
            height: 27px;
            font-family: 'Arial Normal', 'Arial';
            /* font-weight: 400; */
            font-style: normal;
            font-size: 13px;
            /* text-decoration: none; */
            color: #fff;
            /* text-align: center; */
            background: #2b7edf url(../../img/kaohesousuo.png) no-repeat 10px 8px;
            border: none;
            padding-left: 20px;
            border-radius: 4px;
        }
        .del{
            color: #e01919;
        }
        .main .orgClear{
            color: #e01919;
        }
        #newMain  .leftspan{
            display: inline-block;
            width: 156px;
            text-align: right;
            margin-right: 52px;
            vertical-align: top;
        }
        #newMain input{
            width: 250px;
            height: 30px;
            border: 1px solid #ccc;
            border-radius: 2px;
            padding-left: 6px;
        }
        #newMain li{
            list-style: none;
            margin:12px 0;
            padding: 0;
        }
        #newMain .inputsmall{
            width: 116px;
            height: 30px;
            text-align: center;
            padding-left: 0px;
        }
        #newMain select {
            width: 258px;
            height: 30px;
            border: 1px solid #ccc;
            border-radius: 2px;
            padding-left: 6px;
            margin-left: 0;
        }
        #newMain .mustinput{
            color: red;
            height: 26px;
            line-height: 32px;
            margin-left: 5px;
        }
        #newMain .btn{
            color: #2e8ded;
        }
        #newMain .clear{
            color: #e01919;
        }
        #newMain .clear3{
            color: #e01919;
        }
        #newMain .clear4{
            color: #e01919;
        }
        #newMain .adddept:hover{
            cursor:pointer;
        }
        #newMain .clear:hover{
            cursor:pointer;
        }
        .head-top {
            width: 100%;
            position: fixed;
            top: 0px;
            left: 0px;
            height: 45px;
            border-bottom: 1px solid #999;
            background: #fff;
            overflow: hidden;
            z-index: 9999999;
        }
        .head-top ul .head-top-li {
            height: 26px;
            line-height: 26px;
            margin: 6px 11px 0px 11px;
            padding: 1px 20px;
            font-size: 14px;
            border-radius: 20px;
            cursor: pointer;
        }
        .navigation {
            width: 100%;
            box-sizing: border-box;
            height: 70px;
            padding-left: 34px;
            line-height: 70px;
        }
        .navigation img {
            vertical-align: middle;
        }
        .navigation h2 {
            font-weight: normal;
            display: inline-block;
            font-size: 22px;
            color: #494d59;
            vertical-align: middle;
            margin-left: 10px;
        }
        .newClass{
            float: right;
            width: 90px;
            height: 28px;
            background: #2b7fe0;
            color: #fff;
            font-size: 14px;
            line-height: 28px;
            margin: 2%  3% 0 0;
            cursor: pointer;
        }
        .allSet{
            float: right;
            width: 90px;
            height: 28px;
            background: #2b7fe0;
            color: #fff;
            font-size: 14px;
            line-height: 28px;
            margin: -4% 12% 0 0;
            cursor: pointer;
            border-radius: 3px;
        }
        .export{
            float: right;
            width: 90px;
            height: 28px;
            background: #2b7fe0;
            color: #fff;
            font-size: 14px;
            line-height: 28px;
            margin: -4% 12% 0 0;
            cursor: pointer;
            border-radius: 3px;
        }
        .detailBtn {
            float: right;
            width: 115px;
            height: 28px;
            background: #2b7fe0;
            color: #fff;
            font-size: 14px;
            line-height: 28px;
            margin: -4% 21% 0 0;
            cursor: pointer;
            border-radius: 3px;
            text-align: center;
        }
        .query_div {
            float: left;
            font-size: 14px;
            line-height: 28px;
            margin: -4% 0 0 505px;
        }

        .query_btn {
            float: left;
            width: 90px;
            height: 28px;
            background: #2b7fe0;
            color: #fff;
            font-size: 14px;
            line-height: 28px;
            margin: -4% 0 0 790px;
            cursor: pointer;
            border-radius: 3px;
        }
        
        .detail_table th, .detail_table td {
            border: 1px solid grey;
        }
    </style>
</head>
<body>
<div class="navigation">
    <img src="/img/kaoheguanli.png" alt="">
    <h2>评测方案管理-评测人员</h2>
    <h3 style="margin-top: -32px;font-size: 14px;">&nbsp;</h3>
    <div class="query_div">
        <span style="color: #000;">姓名：</span>
        <input style="background: #fff" disabled class="td_title1 release1" id="itemExecuter" type="text" username="">
        <a href="javascript:;" class=" ml8 userPrivAdd btn addUser" name="addUser" style="color: #2b7fe0;">添加</a>
        <a href="javascript:;" class=" ml8 userPrivClear btn clearUser del" name="clearUser">清除</a>
    </div>
    <div class="query_btn">
            <span style="margin-left: 30px;">
               查询
            </span>
    </div>
    <div class="detailBtn">
            <span>
               评测方案明细
            </span>
    </div>
    <div class="export">
            <span style="margin-left: 18px;">
               导出明细
            </span>
    </div>
    <div class="allSet">
            <span style="margin-left: 18px;">
               批量设置
            </span>
    </div>
    <div class="newClass" id="newClass" style="margin-top: -4%">
            <span style="margin-left: 30px;">
                <%--<img style="margin-right: 4px;margin-left: -11px;margin-bottom: 2px;" src="../../img/mywork/newbuildworjk.png" alt="">--%>
                返回
            </span>
    </div>
</div>
<table style="margin:32px auto;width:95%;" >
    <thead>
    <tr style="background: none">
        <th style="width:5%"><input type="checkbox" class="checkAll" ></th>
        <th style="width:12%">姓名</th>
        <th style="width:12%">用户角色</th>
        <th style="width:12%">部门名称 </th>
        <th style="width:12%">问卷名称</th>
        <th style="width:12%">问卷数量</th>
        <th style="width:10%">完成数量</th>
        <th style="width:12%">完成百分比 </th>
        <th style="width:12%">考核得分</th>
        <th style="width:25%">操作</th>
    </tr>
    </thead>
    <tbody id="taskBody">

    </tbody>
</table>
<div id="dbgz_page" class="M-box3" style="display: none">

</div>

<script>
    /*修改部门时向后台传参使用*/
    var userId=''

    // 全选 反选
    $('.checkAll').click(function () {
        if($(this).is(":checked")){
            $('input[type=checkbox]').prop("checked", true);
        } else {
            $('input[type=checkbox]').prop("checked", false);
        }
    });
    // 选人控件
    $('.addUser').click(function(){
        user_id='itemExecuter';
        $.popWindow("../../common/selectUser?0");
    })
    // 清空人员信息
    $('.clearUser').click(function () {
        $('#itemExecuter').attr("privid", "");
        $('#itemExecuter').attr("userpriv", "");
        $('#itemExecuter').attr("user_id", "");
        $('#itemExecuter').val("");
    });

    // 点击查询
    $('.query_btn').click(function () {
        ajaxPageTr.data.userId=$('#itemExecuter').attr("user_id");
        ajaxPageTr.page();
    });

    var indexuser;
    //列表带分页
    function undefindData(data) {
        if(data == undefined){
            return '';
        }else{
            return data;
        }
    }
    function undefindData1(data) {
        if(isNaN(data)){
            return 0;
        }else{
            return data;
        }
    }
    // item.paperCount/item.paperCount
    function getQueryString(name){
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)return  unescape(r[2]); return null;
    }
    var flowId =getQueryString("flowId");
    var type =getQueryString("type");
    var flowFlag =getQueryString("flowFlag");
    var ajaxPageTr={
        data:{
            page:1,//当前处于第几页
            pageSize:5,//一页显示几条
            useFlag:false,
            flowId:flowId
        },
        page:function () {
            var me=this;
            layer.msg('加载中', {
                icon: 16
                ,shade: 0.01
            });
            $.ajax({
                type:'post',
                url:'/scoreFlowUser/selFlowUsers',
                dataType:'json',
                data:me.data,
                success:function(res){
                    if(res.flag){
                        var str='';
                        var opt_str = '';


                        $.each(res.data, function (index, item) {

                            if(item.downCount>0||flowFlag==0||flowFlag==3){
                                $('.allSet').hide();
                            }

                            // 判断是否是考试统计查询 如果是的话 只显示详情
                            if('query'==type){
                                opt_str = '<a class="scoredetail" href="javascript:;"userId=' + item.userId + ' style="margin-right: 10px; ">评分明细</a>';
                                $('.allSet').hide();
                            } else {
                                opt_str = '';
                                if(flowFlag==1||flowFlag==2){
                                    opt_str =
                                        '<a class="set" href="javascript:;" queryType="' + undefindData(Number(item.paperCount)) + '" userId=' + item.userId + '  style="margin-right: 10px">设置</a>';
                                }
                                opt_str +=
                                    '<a class="detail" href="javascript:;" userId=' + item.userId + '  style="margin-right: 10px">详情</a>'
                                    //'<a class="scoredetail" href="javascript:;"userId=' + item.userId + ' style="margin-right: 10px">评分明细</a>';
                            }

                            str += '<tr flowId="'+item.flowId+'">' +
                                '<td><input class="checkboxs" type="checkbox" userId="'+item.userId+'" ></td>'+
                                '<td title="'+undefindData(item.userName)+'">' + undefindData(item.userName)+ '</td>' +
                                '<td title="'+undefindData(item.userPrivName)+'">' + undefindData(item.userPrivName)+ '</td>' +
                                '<td title="'+undefindData(item.deptName) +'">' + '<input autocomplete="off" type="text" style="border: none;background: none;width: 100%;height: 100%;text-align: center" name="participantDept" class="dept_select_input" onclick="setDept($(this))" id="deptId'+index +'"  userId="'+item.userId+'"  deptid="'+(item.deptId ? item.deptId.replace(/,$/, '') :'')+'" value="'+(item.deptName || '')+'"/>' + '</td>' +
                                '<td title="'+undefindData(item.paperName)+'">' + undefindData(item.paperName)+ '</td>' +
                                '<td title="'+undefindData(Number(item.paperCount))+'">' + undefindData(Number(item.paperCount))+ '</td>' +
                                '<td title="'+undefindData(Number(item.downCount)) +'">' + undefindData(Number(item.downCount)) + '</td>' +
                                '<td title="'+function () {
                                    var allNum=undefindData1(Math.round(item.downCount/item.paperCount*10000))/100 + ''
                                    var arr=allNum.split('.')
                                    if(arr.length>1){
                                        var ss=arr[1].substring(0,1)
                                        return arr[0]+'.'+ss
                                    }else{
                                        return arr[0]
                                    }
                                }()+'%'+'">' +function () {
                                    var allNum=undefindData1(Math.round(item.downCount/item.paperCount*10000))/100 + ''
                                    var arr=allNum.split('.')
                                    if(arr.length>1){
                                        var ss=arr[1].substring(0,1)
                                        return arr[0]+'.'+ss
                                    }else{
                                        return arr[0]
                                    }
                                }()+'%'+ '</td>' +
                                '<td title="'+undefindData(item.scoreCount)+'">' + undefindData(item.scoreCount)+ '</td>' +
                                '<td>' +
                                opt_str+
                                // '<a class="evaluationres" href="javascript:;"  style="margin-right: 10px">评测结果</a>' +
                                // '<a class="personalrep" href="javascript:;"  style="margin-right: 10px">个人报告</a>' +
                                //'<a class="del" href="javascript:;"  style="margin-right: 10px">删除</a></td>' +
                                '</tr>';

                        })
                        $('#taskBody').html(str)
                        layer.closeAll();
                        me.pageTwo(res.totle,me.data.pageSize,me.data.page)
                    }else{
                        layer.msg("暂无数据", {icon: 2})
                    }
                    for(var i=0;i<res.data.length;i++){
                        indexuser=res.data[i].userId;
                    }

                }
            })

        },
        pageTwo:function (totalData, pageSize,indexs) {
            var mes=this;
            $('#dbgz_page').pagination({
                totalData: totalData,
                showData: pageSize,
                prevContent:'上一页',
                nextContent:'下一页',
                jump: true,
                coping: true,
                homePage:'',
                endPage: '',
                current:indexs||1,
                callback: function (index) {
                    mes.data.page=index.getCurrent();
                    mes.page();
                }
            });
        }
    }
    ajaxPageTr.page();
    //设置
    $(document).on('click', '.set', function () {
        location.href='/scoreFlowUser/setting?flowId='+flowId+'&flowFlag='+flowFlag+'&userId='+$(this).attr('userId')+'&queryType='+$(this).attr('queryType')
    })
    //详情
    $(document).on('click', '.detail', function () {
        location.href='/scoreFlowUser/settingDetail?flowId='+flowId+'&userId='+$(this).attr('userId')
    })
    //  返回
    $(document).on('click', '.newClass', function () {
        if('query'==type){
            location.href="/ScoreFlowController/assessmentTaskStatistics"
        } else {
            location.href="/ScoreFlowController/assessmentTaskment"
        }
    })
    // 批量设置
    $(document).on('click', '.allSet', function () {
        var userIds = '';
        $('input[type=checkbox]:checked').each(function(){
            var userId = $(this).attr('userId');
            if(userId!=undefined&&userId!=''){
                userIds+=userId+",";
            }
        });
        location.href='/scoreFlowUser/setting?flowId='+flowId+'&flowFlag='+flowFlag+'&insertType=1&userIds='+userIds
    })
    //评分详情
    $(document).on('click', '.scoredetail', function () {
        location.href='/scoreFlowUser/scoreDetail?flowId='+flowId+'&userId='+$(this).attr('userId')+'&type='+type
    })
    //导出
    $(document).on('click', '.export', function () {
        location.href='/scoreFlowUser/selFlowUsers?export=true&flowId='+flowId
    })
    
    // 评测方案明细
    $(document).on('click', '.detailBtn', function () {
        var sheetArr = [];
        layer.open({
            type: 1,
            title: '评测方案明细',
            area: ['100%', '100%'],
            btnAlign: 'c',
            btn: ['导出excel', '取消'],
            content: '<div><table class="layui-table detail_table"><thead><tr><th>姓名</th><th>部门</th><th>角色</th><th>权重</th><th>姓名</th><th>考核角色</th><th>人员权重</th></tr></thead><tbody id="detailTable"></tbody></table></div>',
            success: function () {
                var flowId = $.GetRequest().flowId;
                $.get('/scoreFlowUser/getAllData', {flowId: flowId}, function (res) {
                    if (res.flag && res.data) {
                        var detailStr = '';
                        var data = res.data;
    
                        if (data && data.length > 0) {
                            data.forEach(function (item) {
                                var lengthNum = 0;
                                // 上级
                                var privUsers1 = item.map.privUsers1;
                                lengthNum += privUsers1.length;
                                // 平级
                                var privUsers2 = item.map.privUsers2;
                                lengthNum += privUsers2.length;
                                // 下级
                                var privUsers3 = item.map.privUsers3;
                                lengthNum += privUsers3.length;
            
                                for (var i = 0, length = privUsers1.length; i < length; i++) {
                                    var privUser = privUsers1[i];
                                    if (i == 0) {
                                        detailStr += '<tr>' +
                                                '<td rowspan="' + lengthNum + '">' + item.userName + '</td><td rowspan="' + lengthNum + '">' + item.deptName + '</td><td rowspan="' + length + '">上级</td><td rowspan="' + length + '">' + Math.round(privUser.privWeight * 10000) / 100 + '%</td><td>' + privUser.assessorName + '</td><td>' + privUser.assessmentRole + '</td><td>' + Math.round(privUser.assessorWeight * 10000) / 100 + '%</td>' +
                                                '</tr>';
                                    } else {
                                        detailStr += '<tr>' +
                                                '<td>' + privUser.assessorName + '</td><td>' + privUser.assessmentRole + '</td><td>' + Math.round(privUser.assessorWeight * 10000) / 100 + '%</td>' +
                                                '</tr>';
                                    }
                                }
            
                                for (var i = 0, length = privUsers2.length; i < length; i++) {
                                    var privUser = privUsers2[i];
                                    if (i == 0) {
                                        detailStr += '<tr>' +
                                                '<td rowspan="' + length + '">平级</td><td rowspan="' + length + '">' + Math.round(privUser.privWeight * 10000) / 100 + '%</td><td>' + privUser.assessorName + '</td><td>' + privUser.assessmentRole + '</td><td>' + Math.round(privUser.assessorWeight * 10000) / 100 + '%</td>' +
                                                '</tr>';
                                    } else {
                                        detailStr += '<tr>' +
                                                '<td>' + privUser.assessorName + '</td><td>' + privUser.assessmentRole + '</td><td>' + Math.round(privUser.assessorWeight * 10000) / 100 + '%</td>' +
                                                '</tr>';
                                    }
                                }
            
                                for (var i = 0, length = privUsers3.length; i < length; i++) {
                                    var privUser = privUsers3[i];
                                    if (i == 0) {
                                        detailStr += '<tr>' +
                                                '<td rowspan="' + length + '">下级</td><td rowspan="' + length + '">' + Math.round(privUser.privWeight * 10000) / 100 + '%</td><td>' + privUser.assessorName + '</td><td>' + privUser.assessmentRole + '</td><td>' + Math.round(privUser.assessorWeight * 10000) / 100 + '%</td>' +
                                                '</tr>';
                                    } else {
                                        detailStr += '<tr>' +
                                                '<td>' + privUser.assessorName + '</td><td>' + privUser.assessmentRole + '</td><td>' + Math.round(privUser.assessorWeight * 10000) / 100 + '%</td>' +
                                                '</tr>';
                                    }
                                }
                            });
                        }
                    
                        $('#detailTable').html(detailStr);
                    }
                });
            },
            yes: function () {
                exportExcel($('.detail_table')[0], '评测方案明细');
            }
        });
    });
    
    /**
     * 导出excel文件(*.xlsx格式)
     * @param elt (表格的dom对象)
     * @param fileName (文件名称)
     */ 
    function exportExcel(elt, fileName) {
        var wb = XLSX.utils.table_to_book(elt, {sheet: "Sheet JS"});
        return XLSX.writeFile(wb, fileName + '.xlsx');
    }

    /**
     * 选部门
     */
    function setDept(me) {
        dept_id = me.attr('id')
        userId=me.attr('userId')
        $.popWindow("/scoreFlowUser/selectDept?0");
    }
    function selectDept(deptId) {
        $('#' + dept_id).val($('#' + dept_id).val().replace(/,$/,''))
        $.get('/ScoreFlowController/updateDept',{flowId:flowId,userId:userId,deptId:deptId.replace(/,$/, '')},function (res) {
        })
    }
</script>
</body>
</html>

